<!--
 * @Description: 素材编辑页面
 * @Author: Li Yujie
 * @Date: 2020/12/15
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2020/12/15
-->
<template>
    <div
        class="wrapper"
        ref="wrapper"
    >
        <div class="content-wrapper">
            <!-- title -->
            <div class="header">
                {{ type === 'edit' ? '编辑素材' : type === 'add' ? '新建素材' : '查看素材' }}
            </div>

            <div>
                <div class="form-view">
                    <!--表单-->
                    <el-form
                        :model="ruleForm"
                        :rules="rules"
                        label-position="right"
                        ref="ruleForm"
                        label-width="160px"
                        class="form-wrap"
                        @submit.native.prevent
                    >
                        <el-form-item
                            label="发布状态"
                            v-if="type === 'detail'"
                        >
                            <div>{{ status === 1 ? '已发布' : '未发布' }}</div>
                        </el-form-item>
                        <el-form-item
                            label="选择自营商品"
                            prop="goods_no"
                        >
                            <el-button
                                size="small"
                                type="primary"
                                @click="$refs.goodsSelect.show()"
                                :disabled="type === 'detail'"
                            >
                                {{ ruleForm.goods_no ? '重新选择' : '选择商品' }}
                            </el-button>
                            <!-- table -->
                            <el-table
                                :data="goodInfo"
                                class="goods-table"
                                ref="tempLateName"
                                v-show="goodInfo.length"
                            >
                                <el-table-column
                                    label="商品信息"
                                    align="left"
                                    width="200"
                                >
                                    <template slot-scope="scope">
                                        <div class="goods-info">
                                            <img
                                                :src="scope.row.goods_cover"
                                                class="goods-img"
                                                @click="fnShowPreview(scope.row.goods_cover)"
                                            >
                                            <div>
                                                <el-tooltip
                                                    effect="dark"
                                                    :content="scope.row.goods_title"
                                                    placement="top">
                                                    <div class="goods-name">
                                                        {{ scope.row.goods_title }}
                                                    </div>
                                                </el-tooltip>
                                                <div class="goods-price">
                                                    {{ `￥${scope.row.goods_price}` }}
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="店铺名称"
                                    prop="shop_title"
                                    align="center"
                                />
                                <el-table-column
                                    label="商品编号"
                                    show-overflow-tooltip
                                    prop="goods_no"
                                    align="center"
                                />
                                <el-table-column
                                    label="操作"
                                    align="center"
                                >
                                    <template slot-scope="scope">
                                        <el-button
                                            type="text"
                                            @click="deleteGoods()"
                                            :disabled="type === 'detail'"
                                        >
                                            删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-form-item>
                        <el-form-item
                            label="排序号"
                            prop="sort"
                        >
                            <el-input-number
                                v-model="ruleForm.sort"
                                placeholder="请输入排序号"
                                size="small"
                                style="width: 218px"
                                :controls="false"
                                :step="1"
                                :step-strictly="true"
                                :disabled="type === 'detail'"
                            />
                        </el-form-item>
                        <el-form-item
                            label="素材内容"
                            prop="sort"
                        >
                            <el-radio
                                v-model="ruleForm.type"
                                :label="1"
                                :disabled="type === 'detail'"
                            >上传图片
                            </el-radio>
                            <el-radio
                                v-model="ruleForm.type"
                                :label="2"
                                :disabled="type === 'detail'"
                            >上传视频
                            </el-radio>
                        </el-form-item>
                        <el-form-item
                            label="上传图片"
                            prop="picList"
                            v-if="ruleForm.type === 1"
                        >
                            <div class="pic-view">
                                <div
                                    class="pic-list"
                                >
                                    <div
                                        class="pic-item"
                                        v-for="(item,index) in ruleForm.picList"
                                        :key="index"
                                    >
                                        <img
                                            :src="item"
                                        >
                                        <div class="img-action">
                                            <i
                                                class="el-icon-zoom-in"
                                                @click="fnShowPreview(ruleForm.picList, index)"
                                            />
                                            <i
                                                class="el-icon-delete"
                                                @click="handleDeleteImage(index)"
                                                v-if="type !== 'detail'"
                                            />
                                        </div>
                                    </div>

                                    <el-upload
                                        action="noAction"
                                        :show-file-list="false"
                                        :http-request="handleUploadImage"
                                        :before-upload="beforeUploadImage"
                                        accept="image/*"
                                        :limit="9"
                                        v-if="ruleForm.picList.length < 9"
                                        :disabled="type === 'detail'"
                                    >
                                        <div class="uploader-customer pic-item">
                                            <i class="el-icon-plus"/>
                                            <div class="upload-text">添加图片</div>
                                        </div>
                                    </el-upload>
                                </div>
                                <p class="tips">尺寸建议750 x 750像素以上，大小2M以下，最多9张（可拖曳图片调整显示顺序），格式支持jpg、jpeg、png</p>
                            </div>
                        </el-form-item>
                        <el-form-item
                            label="上传视频"
                            prop="share_data_path"
                            v-if="ruleForm.type === 2"
                        >
                            <div
                                class="video uploader-customer"
                                style="margin-top: 12px"
                                v-if="ruleForm.share_data_path || isUpload"
                            >
                                <!--上传完成显示-->
                                <img
                                    :src="videoCover"
                                    v-if="videoCover"
                                    class="video-cover"
                                >
                                <!--播放和删除-->
                                <div class="img-action">
                                    <i
                                        class="el-icon-video-play"
                                        @click="previewVideo()"
                                    />
                                    <i
                                        class="el-icon-delete"
                                        @click="handleDeleteVideo()"
                                        v-if="type !== 'detail'"
                                    />
                                </div>
                                <!--上传中进度-->
                                <div
                                    class="progress"
                                    v-show="isUpload"
                                >
                                    <el-progress
                                        :percentage="process"
                                        :show-text="false"
                                        color="#fff"
                                    />
                                </div>
                            </div>
                            <el-upload
                                class="upload-demo"
                                style="margin-top: 12px"
                                action="noAction"
                                ref="uploadVideo"
                                accept="video/MP4,video/ogg,video/mkv,video/avi,video/rmvb"
                                :limit="1"
                                :show-file-list="false"
                                :http-request="handleUploadVideo"
                                :before-upload="beforeUploadVideo"
                                v-show="!ruleForm.share_data_path && !isUpload"
                                :disabled="type === 'detail'"
                            >
                                <div class="uploader-customer pic-item">
                                    <i class="el-icon-plus"/>
                                    <div class="upload-text">添加视频</div>
                                </div>
                            </el-upload>
                            <p
                                class="tips"
                                style="margin-top: 16px"
                            >视频文件，支持mkv，mp4，avi，rm，rmvb，上限上传1个，视频大小不可超过30M</p>
                        </el-form-item>
                        <el-form-item
                            label="宣传文案"
                            prop="share_content"
                        >
                            <el-input
                                v-model="ruleForm.share_content"
                                type="textarea"
                                placeholder="请输入宣传文案"
                                style="width: 480px;margin-top: 12px"
                                :autosize="{ minRows: 4, maxRows: 10}"
                                maxlength="200"
                                show-word-limit
                                :disabled="type === 'detail'"
                            />
                        </el-form-item>
                    </el-form>
                </div>

                <!-- button -->
                <div class="footer">
                    <el-button
                        size="medium"
                        type="default"
                        @click="handleCancel()"
                    >
                        返回
                    </el-button>
                    <el-button
                        size="medium"
                        type="primary"
                        @click="handleSubmit()"
                        v-if="type !== 'detail'"
                    >
                        保存
                    </el-button>
                    <el-button
                        size="medium"
                        plain
                        type="primary"
                        @click="handlePreview()"
                    >
                        预览
                    </el-button>
                    <el-button
                        size="medium"
                        type="primary"
                        @click="handleModify()"
                        v-if="type === 'detail' && status === 2"
                    >
                        发布
                    </el-button>
                    <el-button
                        size="medium"
                        type="primary"
                        v-if="type === 'detail'"
                        @click="type = 'edit'"
                    >
                        编辑
                    </el-button>
                </div>
            </div>
        </div>
        <!--商品选择弹窗-->
        <goods-select
            ref="goodsSelect"
            @change="handleSelectGoods"
        />
        <!-- 素材预览弹窗 -->
        <material-preview ref="materialPreview"/>
        <!-- 图片预览 -->
        <img-preview ref="preview"/>
        <!-- 视频播放组件 -->
        <video-simple
            ref="videoSimple"
            :url="video"
            :top="54"
            :left="left"
        />
    </div>
</template>

<script>
import {back} from '@/mixin/back';
import GoodsSelect from '@/components/goods/goods-select';
import MaterialPreview from '@/components/material/material-preview';
import imgPreview from '@/components/common/img-preview';
import videoSimple from '@/components/dorm/video-simple.vue';

export default {
    name: 'MaterialEdit',
    data() {
        return {
            // add新增 edit编辑 detail查看
            type: 'add',
            // 发布状态
            status: 1,
            ruleForm: {
                // 编辑时素材编号
                material_no: '',
                // 商品编号
                goods_no: '',
                // 排序号
                sort: 99,
                // 内容类型 1图片 2视频
                type: 1,
                // 上传图片列表
                picList: [],
                // 上传的视频路径
                share_data_path: '',
                // 上传的视频文件名
                share_data_name: '',
                // 视频后缀
                share_data_ext: '',
                // 视频时长
                share_data_duration: '',
                // 视频大小
                share_data_size: '',
                // 宣传文案
                share_content: ''
            },
            // 视频上传进度
            process: 0,
            isUpload: false,
            goodInfo: [],
            videoCover: '',
            // 本地视频
            video: null,
            // 视频位置
            left: 0,
            // 驳回原因
            reason: '',
            // 驳回原因弹窗
            rejectDialog: false,
            rules: {
                goods_no: [
                    {required: true, message: '请选择自营商品', trigger: 'change'}
                ],
                sort: [
                    {required: true, message: '请输入排序号', trigger: 'blur'}
                ],
                picList: [
                    {required: true, message: '请上传图片', trigger: 'change'}
                ],
                share_data_path: [
                    {required: true, message: '请上传视频', trigger: 'change'}
                ],
                share_content: [
                    {required: true, message: '请填写宣传文案', trigger: 'blur'}
                ],
            }
        };
    },
    mixins: [back],
    components: {
        GoodsSelect,
        MaterialPreview,
        imgPreview,
        videoSimple
    },
    mounted() {
        this.init();
    },
    methods: {
        /**
         * @description 页面初始化
         */
        init() {
            let query = this.$route.query;

            this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '商城'}, {
                title: '素材库',
                path: '/student/material-list'
            }, {title: query.type === 'edit' ? '编辑素材' : query.type === 'add' ? '新建素材' : '查看素材'}]);
            this.authResult = this.$route.meta.authResult;

            this.type = query.type;
            // 编辑或查看时
            if (query.type === 'edit' || query.type === 'detail') {
                this.ruleForm.material_no = query.no;
                this.getMaterialDetail();
            }
        },

        /**
         * 获取
         */
        getMaterialDetail() {

            let params = {
                material_no: this.ruleForm.material_no
            };

            this.$post('/student/shop_goods_share_material%5Cget', params, resp => {
                if (resp.code === 1) {
                    let goods_info = resp.data.goods_info;

                    goods_info.goods_no = resp.data.goods_no;
                    this.goodInfo = [goods_info];
                    this.ruleForm.goods_no = resp.data.goods_no;
                    this.ruleForm.sort = resp.data.sort;
                    this.ruleForm.type = resp.data.type;
                    this.ruleForm.share_content = resp.data.share_content;
                    this.status = resp.data.status;
                    // 图片
                    if (resp.data.type === 1) {
                        this.ruleForm.picList = resp.data.share_data.image_urls;
                    }
                    // 视频
                    if (resp.data.type === 2) {
                        this.ruleForm.share_data_path = resp.data.share_data.path;
                        this.ruleForm.share_data_name = resp.data.share_data.name;
                        this.ruleForm.share_data_ext = resp.data.share_data.ext;
                        this.ruleForm.share_data_duration = resp.data.share_data.duration;
                        this.ruleForm.share_data_size = resp.data.share_data.size;
                        this.video = resp.data.share_data.url;
                        this.getVideoBase64(resp.data.share_data.url).then(url => {
                            this.videoCover = url;
                        });
                    }
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * 获取选择的商品
         * @param val
         */
        handleSelectGoods(val) {
            this.ruleForm.goods_no = val.goods_no;
            this.goodInfo = [val];
        },

        /**
         * 预览图片
         * @param   {String}    images      //单图预览
         * @param   {Array}     images      //多图预览
         * @param index
         */
        fnShowPreview(images, index) {
            if (images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$message({
                    type: 'warning',
                    message: '图片类型错误'
                });
            }
        },

        /**
         * @description 提交
         */
        handleSubmit() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {

                    let params = {...this.ruleForm};

                    params.share_data_image_urls = params.picList.join();
                    delete params.picList;
                    // console.log(params);
                    let url = this.type === 'add' ? '/student/shop_goods_share_material%5Cadd' : '/student/shop_goods_share_material%5Cset';

                    this.$post(url, params, resp => {
                        if (resp.code === 1) {
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                duration: 2000,
                                type: 'success'
                            });
                            this.$router.push({
                                name: 'materialLibrary'
                            });
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });
                }
            });
        },

        /**
         * @description 预览
         */
        handlePreview() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    let {video, videoCover} = this;

                    this.$refs.materialPreview.show(this.ruleForm, video, videoCover);
                }
            });
        },

        /**
         * @description 取消
         */
        handleCancel() {
            if (this.type === 'detail') {
                this.$router.push({
                    name: 'materialLibrary'
                });
            } else {
                this.$confirm('返回后将不会保存您所修改的内容,是否返回', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$router.push({
                        name: 'materialLibrary'
                    });
                });
            }
        },

        /**
         * 删除选择的商品
         */
        deleteGoods() {
            this.goodInfo.length = 0;
            this.ruleForm.goods_no = '';
        },

        /**
         * 上传图片之前 图片大小限制
         * @param file
         * @returns {boolean}
         */
        beforeUploadImage(file) {
            let type = ['image/jpeg', 'image/png', 'image/jpg'],
                isType = type.includes(file.type),
                isLt2M = file.size / 1024 / 1024 < 2;

            if (!isType) {
                this.$notify({
                    title: '提示',
                    message: '格式仅支持jpg、jpeg、png',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            if (!isLt2M) {
                this.$notify({
                    title: '提示',
                    message: '图片大小不能超过2M',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            return isType && isLt2M;
        },

        /**
         * 上传图片
         * @param e
         * @returns {boolean}
         */
        handleUploadImage(e) {
            this.uploadImage(e, (resp) => {
                if (this.ruleForm.picList.length >= 9) {
                    this.$notify({
                        title: '提示',
                        message: '最多只可以上传9张图片',
                        type: 'warning',
                        duration: 2000
                    });
                    return false;
                }
                this.ruleForm.picList = [...this.ruleForm.picList, resp.data.url];
            }, (resp) => {
                console.log(resp.msg);
            });
        },
        /**
         * 上传图片
         * @param e
         * @param success
         * @param error
         */
        uploadImage(e, success, error) {
            let pic = new FormData();

            pic.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                success: resp => {
                    if (resp.code === 1) {
                        success(resp);
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                        error(resp);
                    }
                }
            });
        },
        /**
         * 删除上传的图片
         * @param index
         */
        handleDeleteImage(index) {
            this.ruleForm.picList.splice(index, 1);
        },

        /**
         * 上传视频
         * @param event
         */
        handleUploadVideo(event) {

            this.isUpload = true;
            this.getUploadAuth(event.file.name).then(res => {
                let video = new FormData();

                video.append('file', event.file);
                video.append('policy', res.body.policy);
                video.append('signature', res.body.signature);

                this.$upload({
                    url: res.api,
                    data: video,
                    progress: (e) => {
                        setTimeout(() => {
                            this.process = Number(e.percent);
                        }, 0);
                        // console.log('当前上传进度:' + Number(e.percent.toFixed(1) * 1));
                    },
                    success: resp => {
                        if (resp.code === 200) {
                            this.ruleForm.share_data_path = resp.url;
                            this.ruleForm.share_data_ext = resp.mimetype.split('/')[1];
                            this.ruleForm.share_data_size = resp.file_size;
                            this.ruleForm.share_data_name = event.file.name;

                            this.process = 0;
                            this.video = URL.createObjectURL(event.file);
                            this.getVideoBase64(this.video).then(url => {
                                this.videoCover = url;
                            });
                        } else {
                            //上传失败
                            this.$notify({
                                title: '提示',
                                message: resp.message,
                                type: 'warning',
                                duration: 2000
                            });
                        }

                        this.$refs.uploadVideo.clearFiles();
                        this.isUpload = false;
                    },
                    fail: error => {
                        this.$refs.uploadVideo.clearFiles();
                        this.isUpload = false;
                        this.$notify({
                            title: '提示',
                            message: '上传视频失败',
                            type: 'warning',
                            duration: 2000
                        });
                    }
                });
            });
        },
        /**
         * 视频上传前 校验
         * @param file
         * @returns {boolean}
         */
        beforeUploadVideo(file) {
            const isLt30M = file.size / 1024 / 1024 > 30;

            if (isLt30M) {
                this.$notify({
                    title: '提示',
                    message: '视频大小不能超过30M',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
        },

        /**
         * 获取视频封面
         * @param url
         * @returns {Promise<unknown>}
         */
        getVideoBase64(url) {
            return new Promise((resolve, reject) => {

                let dataURL = '';
                let video = document.createElement("video");

                video.setAttribute('crossOrigin', 'anonymous');//处理跨域
                video.setAttribute('src', url);
                video.setAttribute('width', 100);
                video.setAttribute('height', 100);
                video.setAttribute('autoplay', 'autoplay');
                video.pause();
                video.addEventListener('loadeddata', () => {
                    // 时长
                    this.ruleForm.share_data_duration = video.duration;
                    let canvas = document.createElement("canvas"),
                        width = video.width, //canvas的尺寸和图片一样
                        height = video.height;

                    canvas.width = width;
                    canvas.height = height;
                    canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
                    dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
                    resolve(dataURL);
                });
            });
        },

        /**
         * 查看视频
         */
        previewVideo() {
            this.left = this.$refs.wrapper.clientWidth - 300;
            this.$refs.videoSimple.showVideo();
        },

        /**
         * 删除已上传视频
         */
        handleDeleteVideo() {

            this.ruleForm.share_data_path = '';
            this.ruleForm.share_data_name = '';
            this.ruleForm.share_data_size = '';
            this.ruleForm.share_data_ext = '';
            this.ruleForm.share_data_duration = '';
            this.videoCover = '';
            this.video = null;
        },

        /**
         * 获取视频上传参数
         * @param filename
         * @returns {Promise<unknown>}
         */
        getUploadAuth(filename) {
            return new Promise((resolve, reject) => {
                this.$post('/student/shop_goods_share_material%5Cupload_auth', {
                    file_name: filename
                }, resp => {
                    if (resp.code === 1) {
                        resolve(resp.data);
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            type: 'warning',
                            duration: 2000
                        });
                    }
                });
            });
        },

        /**
         * 发布素材
         * @param row
         */
        handleModify(row) {
            this.$confirm(`确认发布该素材吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = {
                    material_no: this.ruleForm.material_no,
                    status: 1
                };

                this.$post('/student/shop_goods_share_material%5Cset_status', params, resp => {
                    if (resp.code === 1) {
                        this.$notify({
                            title: '成功',
                            message: '操作成功',
                            duration: 2000,
                            type: 'success'
                        });
                        this.$router.push({
                            name: 'materialLibrary'
                        });
                    } else {
                        this.$notify({
                            title: '失败',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },
    }
};
</script>

<style scoped lang="less">
.wrapper {
    width: 100%;

    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        background: #fff;
        box-sizing: border-box;
        overflow-y: auto;

        .header {
            width: 100%;
            height: 68px;
            display: flex;
            align-items: center;
            white-space: nowrap;
            box-sizing: border-box;
            padding-left: 35px;
            color: rgba(51, 51, 51, 1);
            font-size: 20px;
            font-weight: 500;
            position: relative;
            border-bottom: 1px rgba(233, 233, 233, 1) solid;
            flex-shrink: 0;

            &::before {
                content: '';
                background: rgba(24, 144, 255, 1);
                width: 3px;
                height: 20px;
                position: absolute;
                top: 23px;
                left: 25px;
            }
        }

        .form-view {
            background: #FBFBFB;
            border-radius: 2px;
            border: 1px solid #EEEEEE;
            margin: 24px;
            box-sizing: border-box;
            padding: 32px;

            .uploader-customer {
                width: 100px;
                height: 100px;
                background: rgba(242, 242, 242, 1);
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                color: #999;
                padding-top: 12px;
                position: relative;
                border-radius: 4px;
                overflow: hidden;

                i {
                    font-size: 20px;
                }

                .video-cover {
                    width: 100px;
                    height: 100px;
                    position: absolute;
                    left: 0;
                    top: 0;
                }

                .img-action {
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 1;
                    width: 100px;
                    height: 100px;
                    border-radius: 4px;
                    background: rgba(0, 0, 0, .6);
                    justify-content: center;
                    align-items: center;
                    display: none;

                    i {
                        color: #ffffff;
                        font-size: 17px;
                        cursor: pointer;
                    }

                    .el-icon-delete {
                        margin-left: 17px;
                    }
                }

                &:hover {
                    .img-action {
                        display: flex;
                    }
                }

                .progress {
                    padding: 12px;
                    box-sizing: border-box;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 1;
                    width: 100px;
                    height: 100px;
                    border-radius: 4px;
                    background: rgba(0, 0, 0, .6);

                    /deep/ .el-progress {
                        margin-top: 50%;
                        transform: translateY(-50%);

                        .el-progress-bar__outer {
                            background: rgba(255, 255, 255, .2);
                        }
                    }

                }
            }

            .pic-view {
                margin-top: 12px;
                .pic-list {
                    max-width: 680px;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;

                    .pic-item {
                        width: 100px;
                        height: 100px;
                        overflow: hidden;
                        border-radius: 4px;
                        margin-right: 16px;
                        margin-bottom: 16px;
                        position: relative;

                        img {
                            width: 100%;
                            height: 100%;
                            border-radius: 4px;
                        }

                        .img-action {
                            position: absolute;
                            left: 0;
                            top: 0;
                            z-index: 1;
                            width: 100px;
                            height: 100px;
                            border-radius: 4px;
                            background: rgba(0, 0, 0, .6);
                            justify-content: center;
                            align-items: center;
                            display: none;

                            i {
                                color: #ffffff;
                                font-size: 17px;
                                cursor: pointer;
                            }

                            .el-icon-delete {
                                margin-left: 17px;
                            }
                        }

                        &:hover {
                            .img-action {
                                display: flex;
                            }
                        }
                    }
                }
            }

            .tips {
                word-wrap: break-word;
                word-break: normal;
                font-size: 14px;
                font-weight: 400;
                line-height: 18px;
                color: #999999;
            }

            /deep/ .el-input-number {
                input {
                    text-align: left;
                }
            }

            .goods-table {
                width: 800px;
                border-radius: 4px;
                border: 1px solid #DCDFE6;
                margin-top: 16px;

                .goods-info {
                    display: flex;
                    align-items: center;

                    .goods-img {
                        width: 62px;
                        height: 62px;
                        border-radius: 4px;
                        cursor: pointer;
                    }

                    .goods-name {
                        margin-left: 10px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                    }

                    .goods-price {
                        margin-left: 10px;
                        font-size: 14px;
                        font-weight: 400;
                        color: #333333;
                    }
                }
            }
        }

        /*footer*/

        .footer {
            box-sizing: border-box;
            padding-left: 176px;
            margin-top: 8px;
            margin-bottom: 52px;

            .el-button {
                width: 120px;
                margin: 0 16px 12px;
            }
        }
    }

    /*弹窗*/

    .form-title {
        margin: 16px 0;
        font-size: 14px;
        color: #333;
        position: relative;
    }

    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow: 0px 1px 0px 0px rgba(233, 233, 233, 1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;

        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .el-icon-close:before {
            color: rgb(194, 194, 194);
            font-size: 17px;
            font-weight: bold;
        }

        .el-dialog__headerbtn {
            top: 14px;
        }
    }

    /deep/ .el-textarea__inner {
        resize: none;
    }
}
</style>
